<template>
	<view class="page">
		<view class="fixed-header">
			<view class="header-content">
				<text class="title">定时控制</text>
			</view>
		</view>
		<view class="main-content">
			<view class="period-section">
				<view class="period-header">
					<text class="period-title">时段设置</text>
					<text class="period-count">共 {{ timePoint.length }} 个时段</text>
				</view>
				<view class="period-list">
					<view class="period-item" v-for="(item, index) in timePoint" :key="index" clickable="true" showArrow
						@click="openDetail(item, index)">
						<!-- <text  v-if="index ==0" style="font-size: 32rpx;">{{ '是否强制执行'+ (item.minute == 1 ? '(开启)' : '(关闭)') +(item.updateFlag==1?'(更新)' : '') }}</text> -->
						<view class="period-item-content">
							<view class="time-info">
								<view class="icon-box dawn"v-if="index !=0">
									<image v-if="item.hour < 6" src="@/static/image/time1.jpg" class="period-icon"
										mode="aspectFit" />
									<image v-else-if="item.hour < 12" src="@/static/image/time1.jpg" class="period-icon"
										mode="aspectFit" />
									<image v-else-if="item.hour < 18" src="@/static/image/time1.jpg" class="period-icon"
										mode="aspectFit" />
									<image v-else src="@/static/image/time1.jpg" class="period-icon" mode="aspectFit" />
								</view>
								<text class="time-text" v-if="index ==0"><text>是否强制执行{{ (item.minute == 1 ? '(是)' : '(否)') }}</text></text>
								<text class="time-text" v-else>
									<text v-if="item.hour < 6">凌晨</text>
									<text v-else-if="item.hour < 12">上午</text>
									<text v-else-if="item.hour < 18">下午</text>
									<text v-else>晚上{{ item.hour }}</text>
									{{ item.hour.toString().padStart(2, '0') + ':' + item.minute.toString().padStart(2,
									'0')}}
								</text>
							</view>
							<view class="operation-area">
								<view class="temperature">
									<image
										src="https://ai-public.mastergo.com/ai/img_res/9779766c8973da7a31087368becd836c.jpg"
										class="temp-icon" mode="aspectFit" />
									<text class="temp-text">{{ item.temperature }}°C</text>
								</view>
								<text :class="item.ledState == 1 ? 'status-on' : 'status-off'">{{ item.ledState == 1 ? '开启' :
									'关闭' }}</text>
								<uni-icons type="right" size="16" color="#9CA3AF" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="button-group">
				<button class="btn-add" @click="addPoint()">
					<uni-icons type="plus-filled" size="16" color="#4B5563" />
					<text class="btn-text">添加时段</text>
				</button>
				<button @click="savePoint()" class="btn-save">保存设置</button>
			</view>
		</view>
	</view>
</template>



<script>
class pointObj {
	constructor() {
		// this.hour = 0;
		// this.minute = 0;
		// this.ledState = 0;
		// this.temperature = 0;
	}
}
export default {
	data() {
		return {
			timePoint: [],
			Authorization: "version=2022-05-01&res=products%2F336bFZYCce&et=1893427200&method=sha1&sign=nmlRlyEpUtJ1yzyN3mFo3UfQilE%3D"

		};
	},
	onShow() {
		// this.refrash();
		if(this.timePoint.length == 0){
			this.getCurrentDatapoints1();
		}
		
		console.log("==");
		
	},
	methods: {
		getCurrentDatapoints1() {
			let that = this;
			uni.request({
				url: "https://iot-api.heclouds.com/datapoint/current-datapoints?product_id=336bFZYCce&device_name=wendu",
				dataType: 'text',
				header: {
					Authorization: this.Authorization
				},
				data: {},
				success: (res) => {

					if (res.statusCode == 200) {
						let data = JSON.parse(res.data).data.devices[0].datastreams;

						for (var i = 0; i < data.length; i++) {
							let item = data[i];
							
							if (item.id == "timePoint") {
								console.log("data", data[i].value);
								let point = data[i].value;
								let tmp = point.split(",");
								that.timePoint=[];
								for (var j = 0; j < tmp.length; j++) {

									let pointTmp = new pointObj();
									let timePointInt = Number(tmp[j]);
									pointTmp.hour = (timePointInt >> 24) & 0xFF;
									pointTmp.minute = (timePointInt >> 16) & 0xFF;
									pointTmp.ledState = (timePointInt >> 8) & 0xFF;
									pointTmp.temperature = timePointInt & 0xFF;
									that.timePoint.push(pointTmp);
								}
								console.log(that.timePoint)
							} 
						}
						console.log('request success', data);

					}
				},
				fail: (err) => {

				},
				complete: () => {
					this.loading = false;
				}
			});
		},
		openDetail(item, index) {
			console.log("index", index)
			let option = encodeURIComponent(JSON.stringify(item));
			uni.navigateTo({
				url: "/pages/component/ponitConfigDetail/ponitConfigDetail?option=" + option + "&index=" + index,
				events: {
					// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					acceptDataFromOpenedPage: (data) => {
						console.log("data", data)
						// 当index等于数组长度时表示是添加的数据
						if (data.index == this.timePoint.length) {
							let point = {};
							point.hour = 0;
							point.minute = 0;
							point.ledState = 0;
							point.temperature = 0;
							this.timePoint.push(point);
						}
						if (data.index == 0) {
							this.timePoint[data.index].hour = this.timePoint.length - 1;
						} else {
							this.timePoint[data.index].hour = data.option.hour;
						}
						this.timePoint[data.index].minute = data.option.minute;
						this.timePoint[data.index].ledState = data.option.ledState;
						this.timePoint[data.index].temperature = data.option.temperature;
						this.timePoint[data.index].updateFlag = 1;
						console.log("timePoint", this.timePoint)
						// this.timePoint从第二个值添加一个冒泡排序
						for (var i = 1; i < this.timePoint.length; i++) {
							for (var j = i + 1; j < this.timePoint.length; j++) {
								if ((this.timePoint[i].hour * 60 + this.timePoint[i].minute) > this.timePoint[j].hour * 60 + this.timePoint[j].minute) {
									let tmp = this.timePoint[i];
									this.timePoint[i] = this.timePoint[j];
									this.timePoint[j] = tmp;
								}
							}
						}

					}
				},
				fail: function (res) {
					console.log(res)
				}
			})
		},
		// 保存时间点
		savePoint() {
			let that = this;
			// let time="0,"+((Number(this.hour)<<24)+(Number(this.minutes)<<16)
			// +(Number(this.statuss)<<8)+(Number(this.temperatures)));
			// console.log(((Number(this.hour)<<24)+(this.minutes<<16)+(this.statuss<<8)+(this.temperatures)),this.hour,this.minutes,this.statuss,this.temperatures);
			let time = "";
			this.timePoint[0].hour = this.timePoint.length - 1;
			for (var i = 0; i < this.timePoint.length; i++) {
				time = time + ((Number(this.timePoint[i].hour) << 24) + (Number(this.timePoint[i].minute) << 16)
					+ (Number(this.timePoint[i].ledState) << 8) + (Number(this.timePoint[i].temperature))) + ",";
			}
			console.log("time", time);

			// 去除time最后一个字符
			time = time.substring(0, time.length - 1);
			uni.showToast({
				title: "正在保存...",
				mask: true,
				duration: 10000
			})
			uni.request({
				url: "https://iot-api.heclouds.com/datapoint/synccmds?product_id=336bFZYCce&device_name=wendu&timeout=30",
				dataType: 'text',
				method: 'POST',
				header: {
					Authorization: this.Authorization
				},
				data: {
					time: time,
				},
				success: (res) => {
					// console.log("22",res);
					if (res.statusCode == 200) {
						let data = JSON.parse(res.data);
						if(data.code == 0){
							uni.showToast({
								title: "同步成功",
								mask: false,
								duration: 500
							})
						}else{
							uni.showToast({
								title: data.code == 10421?"设备未上线":data.msg,
								mask: false,
								duration: 500
							})
						}
					}else{
						uni.showToast({
							title: "同步失败",
							mask: false,
							duration: 500
						})
					}
					
				},
				fail: (err) => {
					uni.showToast({
						title: "保存失败",
						mask: false,
						duration: 500
					})
				},
				complete: () => {
					this.loading = false;

				}
			});
		},
		addPoint() {
			console.log("dd")
			let point = {};
			point.hour = 0;
			point.minute = 0;
			point.ledState = 0;
			point.temperature = 0;
			this.openDetail(point, this.timePoint.length)
		},
	}
}
</script>

<style>
page {
	height: 100%;
}

.page {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
}

.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
	border-bottom: 1px solid #F3F4F6;
	z-index: 99;
}

.header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32rpx;
	height: 88rpx;
}

.title {
	font-size: 16px;
	font-weight: 500;
}

.main-content {
	margin-top: 88rpx;
	margin-bottom: 200rpx;
	padding: 0 32rpx;
}

.period-section {
	padding: 32rpx 0;
}

.period-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 48rpx;
}

.period-title {
	font-size: 16px;
	font-weight: 500;
}

.period-count {
	font-size: 14px;
	color: #6B7280;
}

.period-list {
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}

.period-item {
	border: 1px solid #F3F4F6;
	border-radius: 16rpx;
}

.period-item-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
}

.time-info {
	display: flex;
	align-items: center;
}

.icon-box {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
}

.period-icon {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.time-text {
	margin-left: 24rpx;
	font-size: 14px;
}

.operation-area {
	display: flex;
	align-items: center;
	gap: 32rpx;
}

.temperature {
	display: flex;
	align-items: center;
}

.temp-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 8rpx;
}

.temp-text {
	font-size: 14px;
}

.status-on {
	font-size: 14px;
	color: #3B82F6;
}

.status-off {
	font-size: 14px;
	color: #9CA3AF;
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
}

.button-group {
	padding: 32rpx;
	display: flex;
	gap: 32rpx;
	border-top: 1px solid #F3F4F6;
}

.btn-add {
	flex: 1;
	height: 96rpx;
	background-color: #F9FAFB;
	color: #4B5563;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-text {
	margin-left: 16rpx;
	font-size: 14px;
}

.btn-save {
	flex: 1;
	height: 96rpx;
	background-color: #3B82F6;
	color: #FFFFFF;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.tab-bar {
	display: flex;
	height: 112rpx;
	border-top: 1px solid #F3F4F6;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tab-text {
	margin-top: 8rpx;
	font-size: 12px;
	color: #9CA3AF;
}

.tab-text.active {
	color: #3B82F6;
}
</style>
